<template>
	<view class="pages">
		<view class="wrap">
			<view class="line"></view>
			<view class="showInfoWrap">
				<view class="info" style="justify-content: space-around;">
					<view>{{info.hexagramName}}</view>
					<view>{{info.describe}}</view>
				</view>
				<view class="showInfo" v-for="(item,idx) in showArr" :key="idx">
					<view class="all" v-if="item.distance == '——'"></view>
					<view class="info" v-if="item.distance == '--'">
						<view class="half"></view>
						<view class="half"></view>
					</view>
					<!-- <view class="text">{{item.sense}}</view> -->
				</view>
			</view>
		</view>
		<view class="content">
			<rich-text :nodes="info.paraphrase"></rich-text>
		</view>
	</view>
</template>

<script>
	import { divinationDetailsAPI } from '../../../utils/api'
	export default{
		data(){
			return {
				showArr:[],
				info:''
			}
		},
		async onLoad(options){
			this.showArr = JSON.parse(options.infoArr)
			const res = await divinationDetailsAPI({random: JSON.parse(options.random)})
			console.log('res==========>',res)
			this.info = res.result
		}
	}
</script>

<style scoped>
	.half{
		width: 46%;
		height: 52rpx;
		background-color: #000;
	}
	.info{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.text{
		color: #333333;
	}
	.all{
		width: 100%;
		height: 52rpx;
		background-color: #000;
	}
	.showInfo{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.showInfoWrap{
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
.line{
	margin-top: 140rpx;
	width: 100%;
	height: 2rpx;
	background: #893702;
}
.wrap{
	padding: 30rpx;
	width: calc(100% - 60)rpx;
	height: 697rpx;
	background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/divination/analysis_bg.png') no-repeat;
	background-size: 100% 100%;
}
.pages{
	padding: 30rpx;
}
</style>